<template>
  <div>
    <Headline :headline1="$t('m.FaceRecognition')+'  /  '" :headline2="$t('m.DiscernRecord')" />
    <a-card style="width: 100%">
      <a-input-search
        style="width: 200px; margin-right: 20px;"
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        enter-button
        @search="onSearch"
        v-model="forminitial.key"
      />
      <a-table
      style="margin-top:20px;"
        :columns="columns"
        :rowKey="(record,i) => i"
        :data-source="data"
        bordered
        :pagination="false"
      >
      <div slot="index" slot-scope="text, tags, i">
          {{ i+1}}
        </div>
        <div slot="joinBlack" slot-scope="text,tags,i">
        <a icon="zoom-out" @click="show(text,tags,i)" type="primary">{{$t('m.Examine')}}</a>
      </div>
      </a-table>
       <a-pagination
        class="pages"
        show-size-changer
        :default-current="1"
        :total="totalA"
        @change="setPagesA"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="setShowSizeChangeA"
      />
    </a-card>
    <a-modal
      :title="$t('m.DiscernRecord')"
      width="800px"
      :visible="visible"
      @cancel="handleCancel"
      :footer="null">
       <a-range-picker
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      :placeholder="['Start Time', 'End Time']"
      @ok="timeOk"
      style="margin-right:20px;"
    />
    <a-input-search
        style="width: 200px; margin-right: 20px;"
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        enter-button
        @search="onSearchA"
        v-model="forminitialB.key"
      />
      <a-button type="primary" @click="exportitem">{{$t('m.Export')}}</a-button>
      <a-table
      style="margin-top:20px;"
        :columns="innerColumns"
        :rowKey="(record,i) => i"
        :data-source="innerData"
        bordered
        :pagination="false"
      />
      <a-pagination
        class="pages"
        show-size-changer
        :default-current="1"
        :total="totalB"
        @change="setPagesB"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="setShowSizeChangeB"
      />
    </a-modal>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import { getDeviceList, getFaceRecord,Faceexport } from "@/api/faceRecognition";
export default {
  name: "IdentifyTheRecord",
  components: { Headline },
  data() {
    return {
      totalB:0,
      totalA:0,
      visible:false,
      data: [],
      columns: [
        {
          title: this.$t('m.SerialNumber'),
          scopedSlots: { customRender: "index" },
        },
        { title: this.$t('m.EquipmentNumber'), dataIndex: "machineid" },
        { title: this.$t('m.Name'), dataIndex: "devname" },
        {title:this.$t('m.Operation'),
        scopedSlots: { customRender: "joinBlack" },
        
        }
      ],
      forminitial: {
        start: 0,
        limit: 10,
        devClass: 2,
        page: 1,
        key:'',
      },
      innerData: [],
      innerColumns: [
        { title: this.$t('m.RecognitionTime'), dataIndex: "recordtime" },
        { title: this.$t('m.Name'), dataIndex: "stafforstuname" },
        { title: this.$t('m.jobnumber'), dataIndex: "stafforstucode" },
        { title: this.$t('m.AnimalHeat'), dataIndex: "tiwen" },
        { title: this.$t('m.AffiliatedUnit'), dataIndex: "custorgname" },
        { title: this.$t('m.Equipment'), dataIndex: "devname" },
        { title: this.$t('m.deviceNumber'), dataIndex: "machineid" },
        { title: this.$t('m.Area'), dataIndex: "areaname" },
      ],
      forminitialB: {
        start: 0,
        limit: 10,
        devId: "",
        page: 1,
        key:'',
        startDate:'',
        endDate:''
        //startDate:this.$moment().subtract(1, "months").format("YYYY-MM-DD")
      },
    };
  },
  methods: {
    setShowSizeChangeB(page, limit) {
      this.forminitialB.page = page;
      this.forminitialB.limit = limit;
      this.forminitialB.start = (page - 1) * limit;
      this._getFaceRecord();
    },
    setPagesB(page, pageSize) {
      this.forminitialB.page = page;
      this.forminitialB.limit = pageSize;
      this.forminitialB.start = (page - 1) * pageSize;
      this._getFaceRecord();
    },
    setShowSizeChangeA(page, limit) {
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.forminitial.start = (page - 1) * limit;
      this.getDevList();
    },
    setPagesA(page, pageSize) {
      this.forminitial.page = page;
      this.forminitial.limit = pageSize;
      this.forminitial.start = (page - 1) * pageSize;
      this.getDevList();
    },
    exportitem(){
      Faceexport(this.forminitialB)
      .then(res => {
        if(res.data.success == true) {
          this.$message.success('导出成功')
          location.href = this.$store.state.BaseUrl + res.data.msg
        } else {
          this.$message.warning(res.data.msg)
        }
        console.log(res)
      })
      .catch(err => {
        this.$message.error('操作失败')
      })
    },
    onSearchA(){
      this._getFaceRecord()
    },
    timeOk(e){
        //   console.log('a')
          this.forminitialB.startDate = this.$moment(e[0]._d).format('YYYY-MM-DD hh:mm:ss')
      this.forminitialB.endDate = this.$moment(e[1]._d).format('YYYY-MM-DD hh:mm:ss')
      this._getFaceRecord()
      },
    onSearch(){
      this.getDevList()
    },
    handleCancel(){
      this.visible = false
    },
    _getFaceRecord(){
      getFaceRecord({ params: this.forminitialB })
        .then((res) => {
          this.totalB = res.data.total
          this.innerData = res.data.data;
          this.$message.success("数据请求成功");
          console.log(res);
        })
        .catch((err) => {
          this.$message.error("数据请求失败");
        });
    },
    show(text,tags,i){
      this.visible = true
      this.forminitialB.devId = tags.id;
      this._getFaceRecord()
    },
    getDevList() {
      getDeviceList({ params: this.forminitial })
        .then((res) => {
          this.totalA = res.data.total
          this.data = res.data.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getDevList();
  },
};
</script>

<style>
</style>